<template>
	<view>
		<NavBar title="优惠券"></NavBar>
		<view class="coupon-list">
			<view :class="'coupon-item zdy-flex zdy-flex-align-center ' + `${item.status != 1 ? 'loseEfficacy' : ''}`" v-for="item in priceList" :key="item.status">
				<view class="zdy-flex zdy-flex-direction zdy-flex-align-center">
					<view class="price zdy-flex zdy-flex-center">
						<text class="icon">￥</text>
						<text>25</text>
					</view>
					<view class="describe">无门槛</view>
				</view>
				<view class="interval"></view>
				<view class="zdy-flex zdy-flex-direction" style="justify-content: center">
					<view class="price-title">新人专享优惠券</view>
					<view class="price-date">2024.05.01-2024.05.15</view>
					<view class="price-describe">查看详情</view>
				</view>
				<u-button color="#FF3A3A" plain v-if="item.status == 1">
					<span class="getCoupon">去使用</span>
				</u-button>
				<image src="/static/img/home/ysy.png" mode="" v-if="item.status == 2"></image>
				<image src="/static/img/home/ygq.png" mode="" v-if="item.status == 3"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			priceList: [{ status: 1 }, { status: 2 }, { status: 3 }]
		};
	},
	methods: {}
};
</script>
<style>
page {
	background-color: #e6f8f7;
}
</style>
<style scoped lang="scss">
.coupon-list {
	margin: 40rpx 30rpx;
	::v-deep .u-button--square {
		margin-left: auto;
		width: 130rpx !important;
		height: 56rpx !important;
		border-radius: 45rpx;
	}
	.getCoupon {
		font-weight: bold;
		font-size: 26rpx;
		color: #ff3a3a;
	}
	.loseEfficacy {
		view,
		text {
			color: #666666 !important;
			opacity: 0.5;
		}
	}
	.coupon-item {
		position: relative;
		margin-bottom: 15rpx;
		padding: 0rpx 30rpx;
		height: 185rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		&::after,
		&::before {
			content: ' ';
			position: absolute;
			width: 40rpx;
			height: 20rpx;
			background-color: #e6f8f7;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			right: 0;
			transform: rotate(-90deg) translateY(50%);
		}
		&::before {
			left: 0;
			transform: rotate(90deg) translateY(50%);
		}
		image {
			position: absolute;
			top: 10rpx;
			right: 40rpx;
			width: 80rpx;
			height: 80rpx;
		}
		.describe {
			font-weight: 500;
			font-size: 22rpx;
			color: #ff3434;
		}
		.price {
			color: #ff3434;
			font-weight: bold;
			font-size: 68rpx;
			.icon {
				font-size: 40rpx;
			}
		}
		.interval {
			margin: 0 30rpx;
			height: 130rpx;
			border-left: 1px dashed #cccccc;
		}
		.price-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #602a0c;
		}
		.price-date {
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
		.price-describe {
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
		}
	}
}
</style>
